/* 清除默认样式 */
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #000;
}
ol,ul {
	list-style:none
}

/* 导航栏上方红条 */
.line {
    width: 100%;
    height: 4px;
    background-color: #cc0f11;
}

/* 导航栏开始 */
.header {
    width: 100%;
    height: 156px;
}
.header .header-in {
    width: 1170px;
    height: inherit;
    margin: 0 auto;
}
/* 左侧logo */
.header .header-in .logo {
    width: 200px;
    height: 180px;
    float: left;
    box-shadow: 0 -30px 10px 10px hsla(0,0%,90%,.5);
    background-color: #fff;
    position: relative;
    z-index: 11;
}
.header .header-in .logo .logo-in {
    width: 140px;
    height: 67px;
    margin: 40px auto 15px;
}
.header .header-in .logo .logo-in img {
    width: inherit;
    height: inherit;
}
.header .header-in .logo .content-wrapper {
    width: 130px;
    height: 30px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.header .header-in .logo .content-wrapper .left {
    width: 30px;
    height: 30px;
}
.header .header-in .logo .content-wrapper .left img {
    width: inherit;
    height: inherit;
}
.header .header-in .logo .content-wrapper span {
    font-size: 20px;
    color: #ccc;
    line-height: 30px;
}
/* 右侧 */
.header .header-in .content {
    display: flex;
    flex-wrap: wrap;
}
/* 右侧上方 */
.header .header-in .content-top {
    width: 970px;
    height: 78px;
    display: flex;
    justify-content: flex-end;
}
.header .header-in .content-top>a {
    display: block;
    height: 45px;
    margin-right: 1px;
    margin-top: 4px;
    float: left;
    background-color: #cc0f11;
    font-size: 14px;
    color: #fff;
    line-height: 45px;
    text-align: center;
}
.header .header-in .content-top a span {
    opacity: 0.86;
}
 .header .header-in .content-top>a span:hover {
    opacity: 1;      
}
.header .header-in .content-top a:last-child {
    margin-right: 0;
}
.header .header-in .content-top .a-long {
    width: 85px;
}
.header .header-in .content-top .a-short {
    width: 60px;
}
.header .header-in .content-top .cart {
    width: 162px;
    height: 64px;
    margin: 4px 0 0 36px;
    background-color: #fff;
}
.header .header-in .content-top .cart .cart-in {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 154px;
    height: 56px;
    margin: 4px;
    border: 1px solid #cdcdcd;
    box-shadow: 0px 0px 5px 5px hsla(0,0%,90%,.5);
    
}
.header .header-in .content-top .cart .cart-in span {
    font-size: 14px;
    color: #999;
}
.header .header-in .content-top .cart .cart-in .cart-logo {
    width: 26px;
    height: 26px;
}
.header .header-in .content-top .cart .cart-in .cart-logo img {
    width: inherit;
    height: inherit;
}
.header .header-in .content-top .cart .cart-in ..text {
    font-size: 14px;
    color: #999;
}

/* 右侧下方 */
.header .content-bottom {
    width: 970px;
    height: 78px;
}
.header .content-bottom .nav {
    width: 554px;
    height: 78px;
    float: left;
    display: flex;
    justify-content: space-between;
    margin: 0 42px 0 74px;
}
.header .content-bottom a {
    font-size: 18px;
    color: #131920;
    font-weight: 600;
    line-height: 78px;
}
.header .content-bottom .search {
    width: 300px;
    height: 48px;
    padding-left: 20px;
    margin: 15px 0 28px;
    border: 1px solid #cdcdcd;
    box-sizing: border-box;
    color: #131920;
}
/* 导航栏结束 */


/* 轮播图开始 */
.slideshow {
    display: block;
    width: 100%;
    height: 500px;
    position: relative;
    z-index: 10;
}
.slideshow img {
    width: inherit;
    height: inherit;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
}
/* 左右箭头 */
.slideshow .arrow span{
    width: 20px;
    height: 20px;
    color: #fff;
    opacity: 0.6;
    position: absolute;
    left: 25%;
    bottom: 60px;
}
.slideshow .arrow span:last-child {
    left: 27%;
}
/* 滚动小圆点 */
.slideshow .dot {
    width: 34px;
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: 17px;
}
.slideshow .dot span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    float: left;
    background-color: #000;
}
.slideshow .dot span:last-child {
    margin-right: 0;
}
/* 轮播图结束 */


/* 上下间隙 */
.split {
    width: 100%;
    height: 60px;
}


/* 手机滑动列表开始 */
.phone-wrapper {
    width: 100%;
    height: 502px;
}
.phone-wrapper .list {
    width: 1170px;
    margin: 0 auto;
}
.phone-wrapper .list .phone {
    width: 270px;
    height: 502px;
    float: left;
    margin-right: 30px;
    position: relative;
}
.phone-wrapper .list .phone .layer {
    width: 270px;
    height: 352px;
    background-color: #fd3e66;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.phone-wrapper .list .phone .layer:hover {
    opacity: .8;
}
.phone-wrapper .list .phone .layer .button-wrapper {
    width: 147px;
    height: 45px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 20px;
}
.phone-wrapper .list .phone .layer .button-wrapper .magifier {
    width: 18px;
    height: 18px;
}
.phone-wrapper .list .phone .layer .button-wrapper .magifier img {
    width: inherit;
    height: inherit;
}
.phone-wrapper .list .phone .layer .button-wrapper .cart {
    width: 18px;
    height: 18px;
}
.phone-wrapper .list .phone .layer .button-wrapper .cart img {
    width: inherit;
    height: inherit;
}
.phone-wrapper .list .phone .layer .button-wrapper .heart {
    width: 18px;
    height: 18px;
}
.phone-wrapper .list .phone .layer .button-wrapper .heart img {
    width: inherit;
    height: inherit;
}


.phone-wrapper .phone:last-child {
    margin-right: 0;
}
.phone-wrapper .list .phone div {
    width: 270px;
    height: 352px;
    background-color: bisque;
}
.phone-wrapper .list .phone div img {
    width: inherit;
    height: inherit;
}
.phone-wrapper .list .phone h1 {
    display: block;
    width: 180px;
    height: 23px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-top: 40px;
    padding: 0 50px;
    overflow: hidden;
    /* 不换行显示，直到遇到br标签为止 */
    white-space: nowrap;
    /* 显示省略号来代表被修剪的文本 */
    text-overflow: ellipsis;
}
.phone-wrapper .list .phone .content {
    height: 17px;
    font-size: 14px;
    margin-top: 80px;
    padding: 0 35px;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.phone-wrapper .list .phone .price {
    height: 16px;
    font-size: 16px;
    text-align: center;
    color: #ff0036;
    font-weight: 700;
    margin-top: 30px;
}
/* 手机滑动列表结束 */


/* 笔记本滑动列表开始 */
a.book {
    display: block;
    width: 100%;
    height: 488px;
    position: relative;
}
a.book img {
    width: inherit;
    height: inherit;
    background-color: green;
}
/* 左右滚动条 */
a.book span {
    width: 45px;
    height: 76px;
    position: absolute;
    top: 50%;
    margin-top: -38px;
    background-color: orange;
}
a.book span:first-of-type {
    left: 282px;
}
a.book span:last-of-type {
    right: 282px;
}   
/* 笔记本滑动列表结束 */


/* 热卖单品开始 */
h1.hot-title {
    display: block;
    width: 1170px;
    margin: 0  auto;
    font-size: 20px;
    font-weight: 600;
    color: #131920;
}
.hot {
    width: 1170px;
    height: 540px;
    margin: 30px auto;
}
.hot .hot-wrapper {
    width: 370px;
    height: 540px;
}
.hot .hot-right {
    width: 770px;
    height: 540px;
    float: right;
}
.hot .hot-right .bottom {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
/* 热卖单品结束 */


/* 横幅手机开始 */
.footbanner {
    display: block;
    width: 100%;
    height: 260px;
}
.footbanner img {
    width: inherit;
    height: inherit;
    object-fit: cover;
}
/* 横幅手机结束 */


/* 手机 笔记本 平板 配件 开始 */
.list {
    width: 1170px;
    height: 23px;
    margin: 0 auto;
}
.list h1 {
    float: left;
    font-size: 20px;
    font-weight: 600;
    margin-right: 50px;
}
.list-wrapper {
    width: 1170px;
    height: 1130px;
    margin: 0 auto;
    margin-top: 30px;
}
.list-wrapper .row .item {
    width: 270px;
    float: left;
    margin-bottom: 70px;
}
.list-wrapper .row .item a img {
    width: inherit;
    height: inherit;
}
.list-wrapper .row .item h1 {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}
.list-wrapper .row .item .content {
    width: 200px;
    height: 14px;
    margin: 20px auto 0;
}
.list-wrapper .row .item .price {
    color: #cc0f11;
    font-weight: bold;
    text-align: center;
    margin-top: 36px;
}
.list-wrapper .row .item a {
    display: block;
    width: 270px;
    height: 352px;
    margin-right: 30px;
    float: left;
}
.list-wrapper .row .item a:last-child {
    margin-right: 0;
}
/* 手机 笔记本 平板 配件 结束 */


/* 尾部部分开始 */
.footer {
    width: 100%;
    height: 400px;
    margin-top: 200px;
    overflow: hidden;
    background-color: #131920;
}
.footer .foot-in {
    width: 770px;
    height: 170px;
    margin: 136px auto 0;

}
.footer .foot-in .communication-cn {
    width: inherit;
    height: 24px;
    margin: 0 auto 28px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 5px;
    color: #fff;
}
.footer .foot-in .communication-en {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-bottom: 50px;
}
.footer .foot-in .input {
    width: 100%;
    height: 54px;
    display: flex;
    justify-content: space-between;
}
.footer .foot-in .input .input-main {
    width: 450px;
    height: 54px;
    padding-left: 20px;
    box-sizing: border-box;
    /* color: #131920; */
}
.footer .foot-in .input .input-button {
    width: 270px;
    height: 54px;
    box-sizing: border-box;
    border: 1px solid #fff;
    text-align: center;
    line-height: 54px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}
/* 尾部部分结束 */





